import React, { Component } from 'react';
// import ReactDOM from 'react-dom';

// import Button from '@/components/Button';
// import Button2 from '@/components/Button2';
// import Counter from '@/components/Counter';

// import '@/components/Tabs/Tabs.scss';
// import Tabs from '@/components/Tabs/Tabs';
// import TabPanel from '@/components/Tabs/TabPanel';
// import Demo01 from '@/components/Demo/Demo01';
// import Demo02 from '@/components/Demo/Demo02';
// import Demo03 from '@/components/Demo/Demo03';
// import Portal from '@/components/Dialog/Portal';
// import Tabs from '@/components/Tab3/Tabs';
// import TabPanel from '@/components/Tab3/TabPanel';

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      activeIndex: 0
    };
  }
  // componentDidMount () {
  //   const dom = ReactDOM.findDOMNode(this);
  // }
  handleChange (json) {
    if (json.activeIndex !== json.prevIndex) {
      console.log(json);
      this.setState({
        activeIndex: json.activeIndex
      });
    }
  }
  renderDiv () {
    return <div>aaa</div>
  }
  render() {
    return (
      <div className="App">
        {/* <div style={{width: '600px', display: 'flex', justifyContent: 'space-between', padding: '20px'}}>
          <Button></Button>
          <Button color="primary">primary</Button>
          <Button color="success">success</Button>
          <Button color="warning">warning</Button>
          <Button color="danger">danger</Button>
          <Button2 color="primary">我是button2</Button2>
        </div>
        <Counter></Counter> */}
        {/* <i className="fa fa-home"></i> */}
        {/* <Tabs className="tabs" defaultActiveIndex={this.state.activeIndex} handleChange={this.handleChange.bind(this)}>
          <TabPanel order={0} tab={<span><i className="fa fa-home">&nbsp;Home</i></span>}>第一个 Tab 的内容</TabPanel>
          <TabPanel order={1} tab={<span><i className="fa fa-book">&nbsp;Library</i></span>}>第二个 Tab 的内容</TabPanel>
          <TabPanel order={2} tab={<span><i className="fa fa-pencil">&nbsp;Applications</i></span>}>第三个 Tab 的内容</TabPanel>
        </Tabs> */}
        <br/>
        {/* <Demo01>
          {
            this.renderDiv()
          }
        </Demo01> */}
{/*
        <Demo02></Demo02>
        <Demo03></Demo03> */}
        {/* <Tabs className="tabs" activeIndex={0}>
          <TabPanel order={0} tab={<span><i className="fa fa-book">&nbsp;Tab 1</i></span>}>第一个 Tab 的内容</TabPanel>
          <TabPanel order={1} tab={'tab 2'} disabled>第二个 Tab 的内容</TabPanel>
          <TabPanel order={2} tab={'tab 3'}>第三个 Tab 的内容</TabPanel>
        </Tabs> */}
      </div>
    );
  }
}

export default App;
